var vm = Vue.createApp({
    data() {
        return {
            expandAddFlag: false,
            optionObj: {},
            optionArr: [],
            currentIndex: -1, // 记录操作的是哪个分类
            collectIndex:-1,
            changeFlag:false,
            collect: {
                id: "",
                categoryId: "",
                categoryTitle: "",
                title: "",
                iconLink: "",
                hrefLink: "",
                status: 1,
                sorted: 1,
                viewNumber: 0,
                likeNumber: 0,
            },
            collectVoList: []
        }
    },
    created() {
        this.getCollectVoList();
        this.getCategoryList();
    },
    methods: {
        getCollectVoList() {
            axios.get("/api/collect/load").then(res => {
                console.log(res.data)
                this.collectVoList = res.data;
            })
        },
        loadMore(index) {
            let categoryId = this.collectVoList[index].categoryId;
            let {pageNo: pno, pageSize, pages} = this.collectVoList[index].pageMap;

            const pageNo = pno * 1 + 1;
            if (pageNo > pages) {
                alert("没有更多了...")
                return;
            }

            this.collectVoList[index].pageMap.pageNo = pageNo;

            // "/api/collect/loadMore?categoryId=" + categoryId + "&pageNo=" + pageNo + "&pageSize=" + pageSize
            axios.get(`/api/collect/loadMore?categoryId=${categoryId}&pageNo=${pageNo}&pageSize=${pageSize}`).then(res => {
                this.collectVoList[index].collectList = this.collectVoList[index].collectList.concat(res.data);
            })
        },
        expandAddBox(index) {
            let categoryId = this.collectVoList[index].categoryId;
            let categoryTitle = this.collectVoList[index].categoryTitle;

            this.currentIndex = index;

            this.optionObj = {id: categoryId, categoryTitle: categoryTitle}

            this.collect.categoryId = categoryId;
            this.collect.categoryTitle = categoryTitle;

            this.expandAddFlag = true;
        },
        selectOption($event) {
            this.currentTIndex = $event.target.selectedIndex - 1;
            this.changeFlag = true;
            this.collect.categoryId = this.optionObj.id;
            this.collect.categoryTitle = this.optionObj.categoryTitle;
        },
        async saveCollect() {
            try {
                var res = await axios.post("/api/collect/saveOrUpdate", this.collect);
                if (this.collect.id) {
                    alert("修改成功")
                    if(!this.changeFlag) {//如果不修改分类，就直接覆盖元素本身即可。
                        this.collectVoList[this.currentIndex].collectList[this.collectIndex] = res.data;
                    }else{// 如果你修改了分类，就把你这个追加到另外一个分类即可
                        // this.currentTIndex 是记录你新选择的分类索引，代表收藏数据会添加到这个新的分类下面来/
                        this.collectVoList[this.currentTIndex].collectList.push(res.data);
                        // 把原来分类上面的收藏数据进行移除
                        this.collectVoList[this.currentIndex].collectList.splice(this.collectIndex,1);
                    }
                }else {
                    alert("添加成功")
                    this.collectVoList[this.currentIndex].collectList[this.collectIndex].push(res.data);
                    this.resetCollect();

                }
                this.closeAddBox();
            }catch (e){
                alert("出错了,请稍后再试!!!")
            }
        },
        resetCollect() {
            this.collect = {
                id: "",
                categoryId: "",
                categoryTitle: "",
                title: "",
                iconLink: "",
                hrefLink: "",
                status: 1,
                sorted: 1,
                viewNumber: 1000,
                likeNumber: 5410,
            }
        },
        closeAddBox() {
            this.expandAddFlag = false;
        },
        getCategoryList() {
            axios.get("/api/collectCategory/load").then(res => {
                this.optionArr = res.data;
            })
        },
        editItem(index, cindex) {
            this.currentIndex = index;
            this.collectIndex = cindex;

            this.collect = this.collectVoList[index].collectList[cindex];

            this.optionObj = {id: this.collectVoList[index].categoryId, categoryTitle: this.collectVoList[index].categoryTitle}

            this.expandAddFlag = true;
        },
        async delItem(index, cindex) {
            if (confirm("确认要删除吗")) {
                const id = this.collectVoList[index].collectList[cindex].id;
                let res = await axios.post("/api/collect/delete/" + id);
                if (res.data) {
                    alert("删除成功");
                    this.collectVoList[index].collectList.splice(cindex, 1);
                }
            }
        }
    }
}).mount("#app")